<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="/user/js/jquery-3.5.0.js"></script>
		<link rel="stylesheet" href="/user/css/pintuer.css">
		<link rel="stylesheet" href="/user/css/admin.css">
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"
			  rel="external nofollow" />
		<link rel='stylesheet' href='css/index.css'>
		<script src="/user/layer/layer.js"></script>
		<script type="text/javascript">
axios.interceptors.response.use(function (response) {
	console.log(response);
	console.log(response.headers);
	console.info("状态码："+response.data.code);
	if (response.data.code===500){
		window.location.href="/error/500.html";
	}
	return response;
}, function (error) {
	return Promise.reject(error);
});
</script>
	</head>
	<body class=" nav-header">

	<header class="">
		<div class="head-box">
			<div class="container">
				<div class="head-left">
					<div class="head-left-wrapper">
						<div class="head-left-slide">
							<p>欢迎光临全民健身！</p>

						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<nav class="navbar navbar-default met-nav " role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button"
						class="navbar-toggle hamburger hamburger-close collapsed"
						data-target="#navbar-default-collapse" data-toggle="collapse">
					<span class="sr-only"> Toggle navigation </span> <span
						class="hamburger-bar"> </span>
				</button>
				<a href="#" class="navbar-brand navbar-logo vertical-align" title="">
					<h1 class='hide'>全民健身</h1>
					<div class="vertical-align-middle">
						<img src="picture/logo.png" alt="" title="" />
					</div>
				</a>
				<h2 class='hide'></h2>
			</div>
			<div class="collapse navbar-collapse navbar-collapse-toolbar"
				 id="navbar-default-collapse">

				<ul class="nav navbar-nav navbar-right navlist">
					<li class="margin-right-20"><a href="index.html" title="首页"
												   class="link "> 首页 </a></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="findCoach.html"> 教练信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="findVenue.html"> 场馆信息 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="relationship.html"> 关注 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link active"
															href="notice.html"> 通知 </a>
						<ul style="display: none">
						</ul></li>
					<li class="dropdown margin-right-20"><a class="link  "
															href="usercenter/index.html"> 个人中心 </a>
						<ul style="display: none">
						</ul></li>
				</ul>
			</div>
		</div>
	</nav>
		<div class="panel admin-panel" id="app">
			<table class="table table-hover text-center">
				<tr>
					<th>名字</th>
					<th>内容</th>
					<th>通知时间</th>
					<th>操作</th>
				</tr>
				<tbody>
				<tr v-for="message in messages">
						<td v-if="message.name!=null">{{message.name}}</td>
					<td v-if="message.name==null">陌生人</td>
					<td>{{message.content}}</td>
						<td>{{message.sendTime}}</td>
					<td v-if="message.mstatus==2">已读</td>
					<td v-if="message.mstatus==1">未读<button @click="updatemstatus(message.mid)" class="btn btn-outline-primary">标记已读</button></td>
							</td>
					</tr>
				</tbody>
			</table>
			<!--分页-->
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					messages:[]
				},
				mounted(){	//当页面元素加载完毕时执行
					axios.get("/user/selectMessageByUid")
							.then(res => {
								console.info(res);
								this.messages=res.data.data;
							});
				},
				methods:{
					updatemstatus:function(mid){
						var params = new URLSearchParams();
						params.append("mid",mid);
						axios.post(
								"/user/updateMessageByMid",
								params
						).then(res => {
							console.log(res.data);
							if (res.data.code==200){
								axios.get("/user/selectMessageByUid")
										.then(res => {
											console.info(res);
											this.messages=res.data.data;
										});
							}
						});
					},
				}
			});
		</script>
	</body>
</html>
